<template>
  <div class="commodity-container">
    <div class="top">
      <div class="header">
        <img class="integral-img" @click="goIntegral" src="../../../static/images/integral.png" alt="积分商城">
        <div class="search">
          <input class="search-box" type="search"  @click="goSearch" placeholder="小龙虾" placeholder-style="font-size: 13px; color: #999;">
          <i class="iconfont icon-search">&#xe60d;</i>
        </div>
      </div>
      <scroll-view scroll-x class="all-industries">
        <!-- <div class="all-industry" v-for="(item, index) in industryList" :key="index" v-bind:class="[item.choosed ? 'choosed' : '']" @click="chooseIndustry(item,index)">
          {{ item.industryName }}
        </div> -->
        <div class="all-industry choosed">全部</div>
        <div class="all-industry">肉类</div>
        <div class="all-industry">肉类</div>
        <div class="all-industry">肉类</div>
        <div class="all-industry">肉类</div>
        <div class="all-industry">肉类</div>
        <div class="all-industry">肉类</div>
      </scroll-view>
    </div>
    <div class="all-pros">
      <scroll-view scroll-y class="industries">
        <!-- <div class="industry" v-for="(item, index) in industryList" :key="index" v-bind:class="[item.choosed ? 'choosed' : '']" @click="chooseIndustry(item,index)">
          {{ item.industryName }}
        </div> -->
        <div class="industry choosed">肉类</div>
        <div class="industry">肉类</div>
        <div class="industry">肉类</div>
        <div class="industry">肉类</div>
        <div class="industry">肉类</div>
        <div class="industry">肉类</div>
        <div class="industry">肉类</div>
        <div class="industry">肉类</div>
        <div class="industry">肉类</div>
        <div class="industry">肉类</div>
        <div class="industry">肉类</div>
        <div class="industry">肉类</div>
        <div class="industry">肉类</div>
        <div class="industry">肉类</div>
        <div class="industry">肉类</div>
        <div class="industry">肉类</div>
        <div class="industry">肉类</div>
      </scroll-view>
      <scroll-view scroll-y class="pro-list">
        <div class="one-pro">
          <div class="product">
            <img class="product-img" src="../../../static/images/img.jpg" alt="">
            <div class="middle-desc">
              <div class="product-name text-nowrap">BCD牌精选东北大米精选东北大米精选东北大米</div>
              <div class="other-msg">
                <div class="other-words">
                  <div class="product-spec">25kg装</div>
                  <div class="product-price">&yen;250.00</div>
                </div>
                <i class="iconfont icon-cart">&#xe635;</i>
              </div>
            </div>
          </div>
        </div>
        <div class="one-pro">
          <div class="product">
            <img class="product-img" src="../../../static/images/img.jpg" alt="">
            <div class="middle-desc">
              <div class="product-name text-nowrap">BCD牌精选东北大米精选东北大米精选东北大米</div>
              <div class="other-msg">
                <div class="other-words">
                  <div class="product-spec">25kg装</div>
                  <div class="product-price">&yen;250.00</div>
                </div>
                <i class="iconfont icon-cart">&#xe635;</i>
              </div>
            </div>
          </div>
        </div>
        <div class="one-pro">
          <div class="product">
            <img class="product-img" src="../../../static/images/img.jpg" alt="">
            <div class="middle-desc">
              <div class="product-name text-nowrap">BCD牌精选东北大米精选东北大米精选东北大米</div>
              <div class="other-msg">
                <div class="other-words">
                  <div class="product-spec">25kg装</div>
                  <div class="product-price">&yen;250.00</div>
                </div>
                <i class="iconfont icon-cart">&#xe635;</i>
              </div>
            </div>
          </div>
        </div>
        <div class="one-pro">
          <div class="product">
            <img class="product-img" src="../../../static/images/img.jpg" alt="">
            <div class="middle-desc">
              <div class="product-name text-nowrap">BCD牌精选东北大米精选东北大米精选东北大米</div>
              <div class="other-msg">
                <div class="other-words">
                  <div class="product-spec">25kg装</div>
                  <div class="product-price">&yen;250.00</div>
                </div>
                <i class="iconfont icon-cart">&#xe635;</i>
              </div>
            </div>
          </div>
        </div>
        <div class="one-pro">
          <div class="product">
            <img class="product-img" src="../../../static/images/img.jpg" alt="">
            <div class="middle-desc">
              <div class="product-name text-nowrap">BCD牌精选东北大米精选东北大米精选东北大米</div>
              <div class="other-msg">
                <div class="other-words">
                  <div class="product-spec">25kg装</div>
                  <div class="product-price">&yen;250.00</div>
                </div>
                <i class="iconfont icon-cart">&#xe635;</i>
              </div>
            </div>
          </div>
        </div>
        <div class="one-pro">
          <div class="product">
            <img class="product-img" src="../../../static/images/img.jpg" alt="">
            <div class="middle-desc">
              <div class="product-name text-nowrap">BCD牌精选东北大米精选东北大米精选东北大米</div>
              <div class="other-msg">
                <div class="other-words">
                  <div class="product-spec">25kg装</div>
                  <div class="product-price">&yen;250.00</div>
                </div>
                <i class="iconfont icon-cart">&#xe635;</i>
              </div>
            </div>
          </div>
        </div>
      </scroll-view>
    </div>
  </div>
</template>

<script>
// Use Vuex
// import store from './store'
// import store from '@/store/'

export default {
  computed: {
    count () {
      return this.$store.state.count
    }
  },
  methods: {
    increment () {
      this.$store.commit('increment')
    },
    decrement () {
      this.$store.commit('decrement')
    },
    goSearch () {
      wx.navigateTo({
        url: '../search/main'
      })
    },
    goIntegral () {
      wx.navigateTo({
        url: '../integral/main'
      })
    }
  }
}
</script>

<style>
.commodity-container {
  background-color: #fff;
  position:  fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  /* height: 100%;
  width: 100%; */
}
::-webkit-scrollbar{
width: 0;
height: 0;
color: transparent;
}
/* .top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 200rpx;
} */
.header {
  display: inline-flex;
  background-color: #fff;
  width: 100%;
}

.integral-img {
  width: 20%;
  height: 80rpx;
}
.search {
  width: 80%;
  position: relative;
  background-color: #fff;
  padding: 18rpx 30rpx;
}

.search-box {
  padding: 15rpx 90rpx;
  font-size: 26rpx;
  background-color: #f4f4f4;
  border-radius: 20rpx;
}

.icon-search {
  font-size: 32rpx;
  color: #b5b5b5;
  position: absolute;
  top: 42rpx;
  left: 75rpx;
}
.all-industries {
  background: #ffffff;
  white-space: nowrap;
}
.all-industry {
  display: inline-flex;
  padding: 0 48rpx;
  line-height: 84rpx;
  font-size: 32rpx;
}

.industries {
  /* position: fixed;
  left: 0;
  top: 200rpx; */
  height: 100%;
  background: #ffffff;
  line-height: 80rpx;
  font-size: 32rpx;
  white-space: nowrap;
}
.industry {
  padding: 7rpx;
  width: 150rpx;
  line-height: 100rpx;
  text-align: center;
  white-space: normal;
}
/* .industry + .industry {
  border-top: solid 2rpx #f9f9f9;
} */
.choosed {
  color: #22ac38;
}

.all-pros {
  display: inline-flex;
  height: 80%;
}
.pro-list {
  white-space: nowrap;
}
.one-pro {
  display: inline;
  white-space: normal;
}
.product {
  display: inline-flex;
  width: 600rpx;
  /* margin-left: 23%; */
  white-space: normal;
}
.product + .product {
  border-top: 1rpx solid #f9f9f9;
}
.product-img {
  margin: 10rpx 20rpx;
  width: 230rpx;
  height: 160rpx;
}

.middle-desc {
  /* padding-right: 20rpx;  */
  height: 160rpx;
  width: 300rpx;
  font-size: 26rpx;
}
.product-name,
.product-spec {
  font-size: 26rpx;
  line-height: 55rpx;
}
.text-nowrap {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.other-msg {
  display: flex;
}

.other-words {
  width: 220rpx;
}
.product-spec {
  color: #666;
}

.product-price {
  margin-top: 25rpx;
  color: #e62225;
}

.icon-cart {
  margin-top: 50rpx;
  background-color: #22ac38;
  font-size: 30rpx;
  border-radius: 50%;
  text-align: center;
  color: #fff;
  width: 57rpx;
  height: 57rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
